<template>
  <a-card class="com-classify">
    <div class="com-classify-body">
      <div class="all">
        <h3>筛选全部</h3>
        <div class="tag">
          <nuxt-link :to="`/category-type?page_type=${category.classify}`">
            <span>查看全部></span>
          </nuxt-link>
        </div>
      </div>
      <div class="grid" v-for="(type, index) in classify_grid" :key="index">
        <h3>{{type.name}}</h3>
        <div class="tags">
          <nuxt-link v-for="item in (category[type.key] || [])"
                     :key="item.tag"
                     :to="`/category-type?page_type=${category.classify}&${type.key}=${item.tag}`">
            <span>{{item.title}}</span>
          </nuxt-link>
        </div>
      </div>
    </div>
  </a-card>
</template>

<script>
export default {
  name: "com-classify-card",
  data() {
    return {
      classify_grid: [
        {
          key: 'type',
          name: '类型',
        },
        {
          key: 'area',
          name: '地区',
        },
        {
          key: 'year',
          name: '年代',
        },
        {
          key: 'act',
          name: '明星',
        },
      ]
    }

  },
  props: {
    page_type: {
      type: String,
      default: '',
    },

    category: {
      type: Object,
      default: function () {return {}}
    }
  }
}
</script>

<style lang="scss">
.com-classify-body {
  display: flex;
  >div {
    padding: 0 20px;
    h3 {
      font-weight: 400;
      font-size: 16px;
      color: $success-color;
    }
    span {
      color: $explain-color;
      display: inline-block;
      padding: 4px 4px;
      font-size: 12px;
      font-weight: 400;
      &:hover {
        color: $success-color;
      }
    }
  }
  .all {
    flex: 0 0 120px;
  }

  .all + div {
    flex: 1;
  }
  .all + div + div {
    flex: 0 0 20%;

  }

  .all + div + div + div {
    flex: 0 0 22%;
  }
  .all + div + div + div + div {
    flex: 0 0 20%;
  }
}
</style>
